<template>
  <div class="image">
    <div class="header">
      <div class="router">
        <div class="route" v-for="(item,index) in routeList" :key="index">
          <div class="router-view" @click="toPath($event,item.url)" v-if="index === 0">
            <img class="back" id="back" src="@/assets/zhome/back.png" alt />
            <span class="border"></span>
            <img class="back" src="@/assets/zhome/home.png" alt />
            <span class="title">{{ item.title }}</span>
          </div>
          <div class="router-next" @click="toPath($event,item.url)" v-else>
            <span class="bor" :class="index !== routeList.length - 1 ? 'gey':''"></span>
            <span class="title">{{ item.title }}</span>
          </div>
          <img
            v-if="index !== routeList.length - 1"
            class="icon-right"
            src="@/assets/zhome/right.png"
            alt
          />
        </div>
      </div>
      <div class="more">
        <div>
          <img src="@/assets/zhome/zl.png" alt />专利工具
        </div>
        <div>
          <img src="@/assets/zhome/que.png" alt />专利工具
          <img style="margin-left: 4px" src="@/assets/zhome/b.png" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";

const props = defineProps({
  title: String
});
console.log(props.title);
const router = useRouter();
const route = useRoute();
let routeList = ref([
  { title: "首页", url: "/home" },
  { title: "查商标", url: "/patent/index" },
  { title: props.title ? props.title : "图像检索" }
]);
const back = () => {
  router.go(-1);
};

const toPath = (e, url) => {
  let id = e.target.id;
  console.log(id);
  if (id === "back") {
    back();
    return;
  }
  if (!url) {
    return;
  }
  router.push(url);
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
}
.more {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  div {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #202020;
    line-height: 20px;
    margin-left: 22px;
    cursor: pointer;
    img:first-of-type {
      margin-right: 2px;
    }
  }
}
::-webkit-scrollbar {
  width: 0px; /* 设置滚动条宽度 */
}

/* 水平滚动条样式 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 设置滑道背景色 */
}

::-webkit-scrollbar-thumb {
  background-color: #aaa; /* 设置滑块背景色 */
  border-radius: 4px; /* 设置滑块圆角 */
}

/* 垂直滚动条样式 */
::-webkit-scrollbar-corner {
  display: none; /* 去除交叉点 */
}

/* Firefox浏览器支持 */
@supports (-moz-appearance: none) {
  ::-moz-scrollbar {
    width: 8px; /* 设置滚动条宽度 */
  }

  ::-moz-scrollbar-track {
    background-color: #f5f5f5; /* 设置滑道背景色 */
  }

  ::-moz-scrollbar-thumb {
    background-color: #aaa; /* 设置滑块背景色 */
    border-radius: 4px; /* 设置滑块圆角 */
  }
}
.image {
  height: 100%;
  background-color: #f5f7fa;
  padding: 0 240px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;

  .header {
    width: calc(100% - 240px);
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 240px;
    position: fixed;
    background-color: #f5f7fa;
    top: 110px;
    left: 0;
    z-index: 9999;
  }
}

.router {
  display: flex;
  .title {
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #575966;
  }
  .route {
    display: flex;
    align-items: center;
    .icon-right {
      width: 10px;
      height: 10px;
      margin: 0 10px;
    }
  }
  &-next {
    padding: 0 12px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .bor {
      width: 6px;
      height: 6px;
      background: #0052d9;
      border-radius: 3px;
      margin-right: 10px;
    }
    .gey {
      background: #575966;
    }
  }
  &-view {
    padding: 0 12px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .border {
      width: 1px;
      height: 10px;
      background: #d8d8d8;
      margin: 0 12px;
    }
    .title {
      margin-left: 10px;
    }
    .back {
      width: 14px;
      height: 14px;
    }
  }
}
</style>